<template>
  <div class="elscop" v-if='data'>
    <div class="title">
      <div class="left">
        <span>电费</span>
      </div>
      <div class="right">
        合计金额：
        <span>{{ itemMoney }}元</span>
      </div>
    </div>
    <el-table
      :header-cell-class-name="cellClass"
      fixed
      ref="multipleTable"
      :data="data"
      tooltip-effect="dark"
      style="width: 100%"
      :toggleAllSelection="false"
      @selection-change="handleSelectionChange"
      :header-cell-style="{ fontSize: '14px', backgroundColor: '#eee', fontWeight: '600' }"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="payCost" label="应缴月份" width="120">
        <!--   <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <el-table-column prop="buildingType" label="房屋类型" width="100">
        <template slot-scope="scope">
          <span v-if="scope.row.buildingType == 'complex_building'">综合楼</span>
          <span v-else>形象店</span>
        </template>
      </el-table-column>
      <el-table-column prop="ctContractProject" label="房屋编号" show-overflow-tooltip></el-table-column>
      <el-table-column prop="projectArea" label="面积(㎡)" width="100"></el-table-column>
      <el-table-column prop="privateElectricStartPoint" label="上期读数" show-overflow-tooltip></el-table-column>
      <el-table-column prop="privateElectricEndPoint" label="本期读数" width="100"></el-table-column>
      <el-table-column prop="waterTotalPoint" label="本月用量" show-overflow-tooltip></el-table-column>
      <el-table-column prop="privateWaterUnit" label="单价(元)" width="100"></el-table-column>
      <el-table-column prop="privateWaterMoney" label="费用(元)" show-overflow-tooltip></el-table-column>
      <el-table-column prop="publicWaterUnit" label="公摊单价(元)" width="120"></el-table-column>
      <el-table-column prop="publicWaterUnit" label="公摊费用(元)" width="120"></el-table-column>
      <el-table-column prop="waterMoney" label="小计(元)" show-overflow-tooltip></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  name: 'payItem',
  data(){
    return{
      itemType:'物业费'
    }
  },
  computed:{},
  props:['data','itemMoney'],
  methods:{
    cellClass(row) {
      if (row.columnIndex === 0) {
        return 'disabledCheck'
      }
    },
    handleSelectionChange(val) {
      this.allItem=val.length
      if(val.length===0){
        this.allMoney=0
      }
      for(let i=0;i<val.length;i++){
        this.allMoney+=Number(val[i].waterMoney)
      }
    },
  }
}
</script>

<style scoped>

</style>